<template>
  <BasicModal destroyOnClose title="订单详情" @register="register" :loading="loading" width="800px">
    <a-descriptions bordered :column="2" size="small">
      <a-descriptions-item label="商户订单号">{{ info?.outTradeNo }}</a-descriptions-item>
      <a-descriptions-item label="系统订单号">{{ info?.orderNo }}</a-descriptions-item>
      <a-descriptions-item label="付款人姓名">{{ info?.input }}</a-descriptions-item>
      <a-descriptions-item label="订单金额/实付"
        >{{ info?.amount }}/{{ info?.money }}</a-descriptions-item
      >
      <a-descriptions-item label="支付通道">{{ info?.codeTitle }}</a-descriptions-item>
      <a-descriptions-item label="收款信息">
        <div v-html="info.collectionInput ? formatInput(info?.collectionInput) : ''"></div>
      </a-descriptions-item>
      <a-descriptions-item label="佣金/费率"
        >{{ info?.agentGain }}/{{ info?.agentRate }}</a-descriptions-item
      >
      <a-descriptions-item label="支付状态">
        <a-tag :color="info.payStatus == 0 ? 'blue' : info.payStatus == 1 ? 'blue' : ''">{{
          formatPayStatus(info?.payStatus)
        }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="订单状态">
        <a-tag :style="getOrderColor(info?.orderStatus)">{{
          getOrderStatus(info?.orderStatus)
        }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="验证码">{{ info?.userCode }}</a-descriptions-item>
      <a-descriptions-item label="支付设备信息">{{ info?.device }}</a-descriptions-item>
      <a-descriptions-item label="订单创建时间">
        {{ dayjs(info?.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
      </a-descriptions-item>
      <a-descriptions-item label="提交时间">{{
        dayjs(info?.customerTime * 1000).format('YYYY-MM-DD HH:mm:ss')
      }}</a-descriptions-item
      ><a-descriptions-item label="收款二维码">
        <a-qrcode :value="info?.agentImgSrc"
      /></a-descriptions-item>
      <a-descriptions-item label="客人提交信息">
        {{ info?.displayData ? info?.displayData.join(',') : '' }}
      </a-descriptions-item>
    </a-descriptions>

    <div style="margin-top: 16px; text-align: center">
      <a-button @click="repostOrder" :loading="loading" type="primary">确认补单</a-button>
      <span style="margin: 16px"></span>
      <a-button @click="closeOrder" :loading="loading" danger type="primary"
        >未收到取消订单</a-button
      >
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { ReviewOrderApi, CloseOrderApi } from '@/api/collection';
  import { getOrderStatus, getOrderColor } from '@/utils/order';
  import { Modal } from 'ant-design-vue';
  import dayjs from 'dayjs';

  const info = ref({});
  const loading = ref(false);
  let reloadFunc = null;
  const [register, { closeModal }] = useModalInner(({ data, reload }) => {
    info.value = data;
    reloadFunc = reload;
  });

  const repostOrder = () => {
    loading.value = true;
    Modal.confirm({
      title: '确认',
      content: '补单成功',
      centered: true,
      getContainer: () => document.body,
      onOk: () => {
        ReviewOrderApi({ orderNo: info.value?.orderNo }).then(() => {
          reloadFunc();
          closeModal();
        });
      },
      onCancel: () => {
        loading.value = false;
        reloadFunc();
        closeModal();
      },
    });
  };

  const closeOrder = () => {
    Modal.confirm({
      title: '确认',
      content: '取消成功',
      centered: true,
      getContainer: () => document.body,
      onOk: () => {
        CloseOrderApi({ orderNo: info.value?.orderNo }).then(() => {
          reloadFunc();
          closeModal();
        });
      },
      onCancel: () => {
        loading.value = false;
        reloadFunc();
        closeModal();
      },
    });
  };

  const formatPayStatus = (status) => {
    const statusText = ['未支付', '已支付', '无信息'];
    return statusText[status];
  };

  function formatInput(info) {
    let text = '';
    info.forEach((element) => {
      text += element.title + ':' + element.value + '<br/>';
    });
    return text;
  }
</script>
